// 入口文件
// import Vue from '../node_modules/vue/dist/vue.js'
import Vue from 'vue'


// 1.1启动路由
import VueRouter from 'vue-router'
//1.2安装路由
Vue.use(VueRouter)

//注册vuex
import Vuex from 'vuex'
Vue.use(Vuex)
//初始化car 的值 页面加载的时候
var car=JSON.parse(localStorage.getItem('car')|| "[]");
const store = new Vuex.Store({
  state:{ //this.$store.state.xxx
    car : car//将购物车中商品的数据,用一个数组保存,car中存储商品的对象 {id: ,count:数量,price:价格,selected:是否选中商品 }
  },
  mutations:{ //this.store.commit('方法名称',"按需传递唯一的参数")
    addToShopCar(state,goodsinfo) {
      //点击加入购物车,保存到store 中的 car上
      //如果已经有这个商品 ,只需要更新数量
      //如果没有,直接把商品数据 push到 car中

      //默认car中没有找到商品
      var flag = false;
      state.car.some(item => {
        if(item.id == goodsinfo.id){
          item.count =parseInt(item.count) + parseInt(goodsinfo.count);
          console.log(item.count+"+"+parseInt(goodsinfo.count)+"=");
          console.log((item.count));
          console.log(typeof(item.count));
          flag=true;
          return true;
        }
      });
      if(!flag) { //没有找到将goodsinfo添加到数组中
        state.car.push(goodsinfo);
      }
      //每次更新购物车,将 car 写入到localStorage中
      localStorage.setItem('car',JSON.stringify(state.car));
    },
    updataGoodsCount(state,goodsinfo){//修改购物车中商品的数量值,通过传递过来的id和数量
      state.car.some(item=>{
        //相同商品 拿到的参数 覆盖 当前 car的值
        if(item.id==goodsinfo.id){
          item.count=parseInt(goodsinfo.mount);
          return true;
        }
      })
       //每次更新购物车,将 最新的car 写入到localStorage中
      localStorage.setItem('car',JSON.stringify(state.car));
    },
    removeGoods(state,id){ //从购物车删除商品,
      state.car.some((item,index)=>{
        if(item.id== id){
          state.car.splice(index,1);
          return true;
        }   
      })
      //每次更新购物车,将 最新的car 写入到localStorage中
      localStorage.setItem('car',JSON.stringify(state.car));  
    },
    updataGoodsSelected(state,goodsinfo){
      state.car.some(item=>{
        if(item.id == goodsinfo.id){
          item.selected = goodsinfo.selected;
          return true;
        }
      })
      localStorage.setItem('car',JSON.stringify(state.car));
    },
  },
  getters:{ //this.$store.getters.xxx
    getAllCount(state){
      var c=0;
      state.car.forEach(item=>{
        c += parseInt(item.count);
        console.log(typeof(c)+c);
      })
      return c;
    },
    getGoodCount(state){ //获取car中的商品信息 以 id:num的形式返回
      var o= {};
      state.car.forEach(item=>{
        o[item.id]=item.count;
      })
      return o;
    },
    getGoodSlected(state){ //获取购物车页面商品选中状态 id:selected 形式返回对象
      var o={};
      state.car.forEach(item=>{
        //id:selected 的形式返回本地数据
        o[item.id]=item.selected;
      })
      return o;
    },
    getGoodsAllCountAndPrice(state){//获取选中的商品总件 和总价
      var o = {
        count : 0,
        price : 0,
      };
      state.car.forEach(item=>{ 
        if(item.selected) { //选中
          o.count += item.count;
          o.price += item.price * item.count;
        }
      })
      return o;
    }
  },
});

// 2.1导入 vue-resource
import VueResource from 'vue-resource'
//2.2安装 vue-resource
Vue.use(VueResource)
//设置请求的根路径
Vue.http.options.root = 'https://www.easy-mock.com/mock/5cccf6bf8b7ca91bf19ca794/vuestudy';
Vue.http.options.emulateJSON = true; //设置post请求表单提交的格式为application/json


//导入mui组件
//头部导航蓝组件
// import { Header, Swipe, SwipeItem ,Button,Lazyload } from 'mint-ui';
// Vue.component(Header.name, Header);
// //轮播图组件
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button);
// Vue.use(Lazyload);
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css'

//安装图片预览插件
// import VuePreview from 'vue-preview'
// Vue.use(VuePreview, {
//   mainClass: 'pswp--minimal--dark',
//   barsSize: {top: 0, bottom: 0},
//   captionEl: false,
//   fullscreenEl: false,
//   shareEl: false,
//   bgOpacity: 0.85,
//   tapToClose: true,
//   tapToToggleControls: false
// })
import vuePicturePreview from 'vue-picture-preview'
Vue.use(vuePicturePreview)


import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'


// 1.3导入路由模块
import router from './router.js'
//导入app跟组件
import app from './App.vue'


var vm=new Vue({
  el:'#app',
  data:{
    msg:'123'
  },
  methods:{},
  render: c=>c(app) , //将从App.vue拿到的模板对象login放到对应的#app绑定的html模板上替换
  router, //1.4挂载路有对象到实例上 的router-view标签内
  store,
  
})




